<template>
  <div class="form-page">
    <div class="block-wrap form-container">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="8em"
        v-loading="formLoading"
      >
        <el-form-item label="类型" prop="menuType">
          <el-radio v-model="form.menuType" label="1">菜单</el-radio>
          <el-radio v-model="form.menuType" label="2">操作</el-radio>
        </el-form-item>

        <el-form-item label="菜单名称">
          <el-input
            v-model="form.menuName"
            placeholder="长度为5~20个字符，只能包含汉字、字母、数字"
            clearable
          />
        </el-form-item>

        <el-form-item label="上级菜单">
          <el-cascader
            v-if="show"
            v-model="parentId"
            :options="menuList"
            :props="props"
            clearable
            @change="handleMenu"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="链接">
          <el-input v-model="form.url" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.orderNum" type="number" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            :autosize="{ minRows: 2 }"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button type="default" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getMenuList, addMenu, updateMenu, getMenuInfo } from "@/api/sys";
export default {
  name: "AddMenu",
  data() {
    return {
      passwordType: "password",
      passwordReType: "password",
      form: {
        menuType: "",
        menuName: "",
        parentId: "",
        url: "",
        orderNum: "",
        remark: ""
      },
      menuList: [],
      menuList_copy: [],
      menuListItem: {},
      rules: {
        type: [{ required: true }]
      },
      props: {
        checkStrictly: true,
        label: "name",
        value: "id"
      },
      parentId: [],
      formLoading: false
    };
  },
  watch: {
    $route: {
      handler() {
        let { menuId } = this.$route.query;
        if (menuId) {
          this.$route.meta.title = "编辑菜单";
          this.getMenuInfo(menuId);
        } else {
          this.$route.meta.title = "新增菜单";
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    show() {
      let { menuId } = this.$route.query;
      if (!menuId) {
        return true;
      } else {
        return this.parentId.length != 0 ? true : false;
      }
    }
  },
  created() {
    this.getMenuList();
  },
  methods: {
    async getMenuList() {
      let data = await getMenuList();
      this.menuList = data.data;
      this.menuList.map(item => {
        if (item.children.length !== 0) {
          item.children.filter(itemChild => {
            return delete itemChild.children;
          });
        }
      });
    },
    async getMenuInfo(menuId) {
      let data = await getMenuInfo(menuId);
      console.log(data.data);
      let { menuType, menuName, url, orderNum, remark, parentId } = data.data;
      this.form.menuType = menuType;
      this.form.menuName = menuName;
      this.form.url = url;
      this.form.orderNum = orderNum;
      this.form.remark = remark;
      this.form.menuId = menuId;
      this.form.parentId = parentId;
      let parentData = await getMenuInfo(data.data.parentId);
      if (parentData.data.parentId >= 0) {
        this.parentId.push(parentData.data.parentId, data.data.parentId);
      } else {
        this.parentId.push(data.data.parentId);
      }
      console.log(this.form);
    },
    handleMenu(value) {
      console.log(value);
      if (value.length !== 0) {
        this.form.parentId = value[value.length - 1];
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let { menuId } = this.$route.query;
          if (!menuId) {
            this.addMenu();
          } else {
            this.editMenu();
          }
        } else {
          console.log("error submit!!");
          this.loading = false;
          return false;
        }
      });
    },
    addMenu() {
      addMenu(this.form)
        .then(res => {
          if (res.code === 200) {
            this.$message.success("新增成功");
            this.loading = false;
            this.$router.push({ name: "Menu" });
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    editMenu() {
      updateMenu(this.form)
        .then(res => {
          if (res.code === 200) {
            this.$message.success("更新成功");
            this.loading = false;
            this.$router.push({ name: "Menu" });
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
@import "~@/styles/page/form-page.scss";
.el-cascader {
  width: 100%;
}
</style>
